<template>
  <div>
     <List :data="list">
      <template #default="obj">
       <button @click="del(obj.item.id)">删除</button>
      </template>
    </List>
     <List :data="list">
      <template #default="obj">
       <button @click="show(obj.item)">查看</button>
      </template>
    </List>
  </div>
</template>

<script>
import List from './components/List.vue'
export default {
  name: 'HelloWorld',
  components: {
    List
  },
  data() {
    return {
      list: [
        {id:1,name: '张三',email: 'zhangsan@163.com',phone: '13888888888'},
        {id:2,name: '李四',email: 'lisi@163.com',phone: '13888888888'},
        {id:3,name: '王五',email:'wangwu@163.com',phone: '13888888888'}
      ]
    }
  },
  methods: {
    del(id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    show(obj) {
     alert(`姓名：${obj.name} 邮箱：${obj.email} 手机号：${obj.phone}`)
    }
  },

}
</script>

<style scoped>
button {
 border: none;
 background-color:white;
 padding: 8px 16px;
 border-radius: 4px;
}
</style>